<template>
	<div class="asider">
		<div class="calendar">
      <el-menu
      :default-active="active"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#fff"
      text-color="#000"
      active-text-color="#3eaf7c">
        <el-menu-item :index="item.index" v-for="(item) in menuList" :key='item.title' @click="change(item.path)">
          <span slot="title">{{item.title}}</span>
        </el-menu-item>
      </el-menu>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import roturList from "../router/index";
export default {
  name: "asider",
  data() {
    return {
      menuList: [],
      active:"0",
    };
  },
  methods: {
    handleOpen() {},
    handleClose() {},
    change(val) {
      this.$router.push(val);
    },
  },
  computed: {
    ...mapState("menu", ["menuIndex"]),
  },
  mounted() {
    console.log(this.menuIndex, "666", roturList.options);
    this.menuList = roturList.options.routes[this.menuIndex].children;
    console.log(this.menuList);
  },
  watch: {
    menuIndex() {
      // console.log(roturList.options.routes[this.menuIndex][0]);
      this.menuList = roturList.options.routes[this.menuIndex].children;
      this.active="1"
      this.$router.push(
        roturList.options.routes[this.menuIndex].children[0].path
      );
    },
  },
};
</script>

<style lang='scss' >
.el-menu {
  padding-top: 20px;
  height: calc(100vh - 70px);
}
.el-menu-item {
  background-color: #fff !important;
  height: 30px !important;
  line-height: 30px !important;
  margin-left: 10px !important;
  // margin-bottom: 20px;
}
.el-menu-item:hover {
  color: #3eaf7c !important;
}
.is-active {
  border-left: 2px solid #3eaf7c !important;
}
</style>

